import React from 'react';
import './dialog.less'
class Dialog extends React.Component {
    close= (e)=>{
      console.dir(e.target.getAttribute('_self'))
      if(e.target.getAttribute('_self')){
        this.props.onClose&&this.props.onClose(false)
      }
      
    }
    sure=()=>{
      this.props.onSure&&this.props.onSure()
    }
    cancel=()=>{
      this.props.onCancel&&this.props.onCancel(false)
    }
    render() {
        let {children} = this.props;
        let header = <header>头部  <button _self='true'>X</button></header>;
        let main = '身体';
        let footer =  <footer>
                        <button onClick={this.sure}>确定</button> 
                        <button onClick={this.cancel}>取消</button>
                      </footer>
        // children 字符串  对象(节点)   数组
        console.log(children)
        if(typeof children == 'string'){
          // 文本
          main = children
        }else if(Array.isArray(children)){
          // 数组
          let h = [];
          let m = [];
          let f = [];
          children.forEach(item=>{
            // item 节点或者文本
            if(typeof item == 'string'){
              m.push(item)
            }else{
              if(item.props.slot=='header'){
                h.push(item)
              }else if(item.props.slot=='footer'){
                f.push(item)
              }else{
                m.push(item)
              }
            }
          })
          header = h.length ? h : header;
          main = m.length ? m : main;
          footer = f.length ? f : footer

        }else if(typeof children !== 'undefined'){
          // 节点
          switch (children.props.slot) {
            case 'header':
              header = children
              break;
            case 'footer':
              footer = children
              break;
            default:
              main = children
              break;
          }
        }
        return <div className='dialog_box' _self='true' onClick={this.close}>
            <div className="box">
              {header}
              <main>{
                /* this.props.children || '身体' */
                main
              }</main>
              {
                footer
              }
            </div>
        </div>;
    }
}
export default Dialog